<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" :width="800" destroy-on-close @closed="$emit('closed')">
		<el-table
			:data="detailTable"
			style="width: 100%;">
			<el-table-column
				prop="id"
				label="ID">
			</el-table-column>
			<el-table-column
				label="参团用户">
				<template #default="scope">
					<div style="display: flex;align-items: center">
						<img :src="scope.row.avatar" style="margin-right: 10px;width: 40px;height: 40px;"/>
						ID: {{ scope.row.user_id }}
					</div>
				</template>
			</el-table-column>
			<el-table-column
				prop="order_id"
				label="订单id">
			</el-table-column>
			<el-table-column
				label="状态">
				<template #default="scope">
					<el-tag type="success" v-if="scope.row.status == 1">待支付</el-tag>
					<el-tag type="success" v-if="scope.row.status == 2">已支付</el-tag>
					<el-tag type="danger" v-if="scope.row.status == 3">已取消</el-tag>
					<el-tag type="danger" v-if="scope.row.status == 4">超时关闭</el-tag>
				</template>
			</el-table-column>
			<el-table-column
				prop="create_time"
				label="下单时间">
			</el-table-column>
		</el-table>
	</el-dialog>
</template>

<script>
export default {
	emits: ['success', 'closed'],
	data() {
		return {
			mode: "show",
			titleMap: {
				show: '订单详情'
			},
			detailTable: [],
			visible: false
		}
	},
	methods: {
		//显示
		open(mode = 'show') {
			this.mode = mode;
			this.visible = true;
			return this
		},
		// 表单注入数据
		async setData(row) {
			let res = await this.$API.groupon.orderDetail.get({id: row.id})
			this.detailTable = res.data
		}
	}
}
</script>

<style scoped>

</style>
